<template>
    <div class="history">
        <h3>{{title}}</h3>
        <p class="sort" v-show="pageType=='tem-city'||pageType=='tem-county'">
            <span @click="doSort('最高')" :class="{activeSort:activeSort=='最高'}">最高</span>
            <span @click="doSort('最低')" :class="{activeSort:activeSort=='最低'}">最低</span>
        </p>
        <div class="table">
            <ul class="title">
                <li></li>
                <li>历史极值</li>
                <li>历史今天</li>
            </ul>
            <div class="main">
                <ul class="num">
                    <li>NO.1</li>
                    <li>NO.2</li>
                    <li>NO.3</li>
                </ul>
                <ul class="valsLimit">
                    <li v-for="(item,index) of activeLimit" :key="index">
                        <p class="red">{{item.value}}</p>
                        <p class="blue">
                            <span>{{item.year}}</span>
                            <span>{{item.date}}</span>
                        </p>
                    </li>
                </ul>
                <ul class="valsToday">
                    <li v-for="(item,index) of activeToday" :key="index">
                        <p class="red">{{item.value}}</p>
                        <p class="blue">
                            <span>{{item.year}}</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    watch:{
        pageType(newval){
            if(newval=='tem-city'){
                this.title = '温州市(58659)日温度历史统计'
                this.activeLimit = this.valLimit[0]
                this.activeToday = this.valToday[0]
            }else if(newval=='tem-county'){
                this.title = '永嘉县(58659)高温历史统计'
                this.activeLimit = this.valLimit[0]
                this.activeToday = this.valToday[0]
            }else if(newval=='rain-city'){
                this.title = '近30年日累计降雨量统计'
                this.activeLimit = this.valLimit[1]
                this.activeToday = this.valToday[1]
            }else if(newval=='rain-county'){
                this.title = '近30年日累计降雨量统计'
                this.activeLimit = this.valLimit[1]
                this.activeToday = this.valToday[1]
            }else if(newval=='wind-city'){
                this.title = '近30年历史气候统计'
                this.activeLimit = this.valLimit[2]
                this.activeToday = this.valToday[2]
            }else if(newval=='wind-county'){
                this.title = '近30年历史气候统计'
                this.activeLimit = this.valLimit[2]
                this.activeToday = this.valToday[2]
            }
        }
    },
    data(){
        return{
            title:'',
            activeSort:'最高',
            valLimit:[
                [
                    {value:'39℃',year:'2002',date:'07/13'},
                    {value:'38℃',year:'2004',date:'07/23'},
                    {value:'37℃',year:'2008',date:'06/23'},
                ],
                [
                    {value:'100mm',year:'2002',date:'07/13'},
                    {value:'80mm',year:'2002',date:'07/13'},
                    {value:'57mm',year:'2002',date:'07/13'},
                ],
                [
                    {value:'100m/s',year:'2002',date:'07/13'},
                    {value:'100m/s',year:'2002',date:'07/13'},
                    {value:'100m/s',year:'2002',date:'07/13'},
                ]
            ],
            valToday:[
                [
                    {value:'19℃',year:'2002'},
                    {value:'18℃',year:'2004'},
                    {value:'21℃',year:'2008'},
                ],
                [
                    {value:'28mm',year:'2002'},
                    {value:'18mm',year:'2004'},
                    {value:'21mm',year:'2008'},
                ],
                [
                    {value:'28m/s',year:'2002'},
                    {value:'18m/s',year:'2004'},
                    {value:'21m/s',year:'2008'},
                ]
            ],
            activeLimit:[],//历史极值
            activeToday:[],//历史今天
        }
    },
    methods:{
        doSort(text){
            this.activeSort = text
            if(text=='最高'){
                this.activeLimit = this.valLimit[0]
            }else if(text=='最低'){
                this.activeLimit = [
                    {value:'1℃',year:'2002',date:'01/13'},
                    {value:'2℃',year:'2004',date:'12/23'},
                    {value:'5℃',year:'2008',date:'01/03'},
                ]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .history{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        position: relative;
        h3{
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:center;
            height:2.3rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
            width:22rem;  
        }
        .sort{
            position:absolute;
            right:0;
            width:7rem;
            height:2.3rem;
            display:flex;
            span{
               flex:1;
               border:.1rem solid rgba(48, 138, 199, 0.5);
               box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
               text-align:center;
               line-height:2.3rem;
               cursor: pointer;
            }
            .activeSort{
                color:#DCAD88;
            }
            
        }
        .table{
            flex:1;
            display:flex;
            .title{
                width:2.4rem;
                display:flex;
                flex-direction: column;
                margin:0 1rem 0 1rem;
                li{
                    flex:1;
                    letter-spacing: .2rem;
                    line-height:1.2rem;
                }
            }
            .main{
                flex:1;
                height:100%;
                .num{
                    width:100%;
                    height:3rem;
                    display:flex;
                    line-height:3rem;
                    li{
                        flex:1;
                        color:#F2F4EA;
                        margin-left:.5rem;
                    }
                }
                .valsLimit{margin:.6rem 0 1rem 0;}
                .valsLimit,.valsToday{
                    width:100%;
                    height:3rem;
                    display:flex;
                    li{
                        flex:1;
                        display:flex;
                        p{
                            width:4.5rem;
                            height:3rem;
                            text-align:center;
                        }   
                        .red{
                            background-image: url('../../../../static/images/actuallyMonitor/errRed.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            line-height:2rem;
                            color:#ED6D70;
                        }
                        .blue{
                            background-image: url('../../../../static/images/actuallyMonitor/err.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            span{
                                &:nth-child(1){
                                    display:inline-block;
                                    margin-top:.5rem;
                                }
                            }
                        }
                    }
                }
            }  
        }
    }
</style>